<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/admin/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>所有订单</el-breadcrumb-item>
            <!-- <el-button @click="getAllusers(true)">get</el-button> -->
          </el-breadcrumb>

        <el-table
        :data="user_data.filter(data => !searchInfo ||
          data.id.toString().toLowerCase().includes(searchInfo.toLowerCase()) ||
          data.phone.toLowerCase().includes(searchInfo.toLowerCase()) ||
          data.time.toLowerCase().includes(searchInfo.toLowerCase()) ||
          data.shop.toLowerCase().includes(searchInfo.toLowerCase()) ||
          data.value.toLowerCase().includes(searchInfo.toLowerCase()) ||
          data.status.toLowerCase().includes(searchInfo.toLowerCase()) ||
          data.tip.toLowerCase().includes(searchInfo.toLowerCase()))"
        style="width: 100%">
 
        <el-table-column type="expand" style="width:300px">
                <template slot-scope="props" >
                <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单ID">
                <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="下单人姓名">
                <span>{{ props.row.cust }}</span>
                </el-form-item>
                <el-form-item label="下单人电话">
                <span>{{ props.row.phone }}</span>
                </el-form-item>
                <el-form-item label="下单时间">
                <span>{{ props.row.time }}</span>
                </el-form-item>
                <el-form-item label="下单金额">
                <span>{{ props.row.value }}</span>
                </el-form-item>
                <el-form-item label="订单状态">
                <span>{{ props.row.status }}</span>
                </el-form-item>
                <el-form-item label="订单备注">
                    <span>{{ props.row.tip }}</span>
                </el-form-item>

                    <el-table :data="props.row.foods"  size="mini">
                        <el-table-column prop="food" label="菜品" min-width="3"></el-table-column>
                        <el-table-column prop="num" label="数量" min-width="3"></el-table-column>
                    </el-table>

            </el-form>
            </template>
        </el-table-column>
     
        <el-table-column
            sortable
            label="订单ID"
            prop="id">
        </el-table-column>
        <el-table-column
        sortable
            label="下单人姓名"
            prop="cust">
        </el-table-column>
        <el-table-column
        sortable
            label="所属店铺"
            prop="shop">
        </el-table-column>
        <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
            <el-input
                v-model="searchInfo"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
        
              <template slot-scope="{row,$index}">
                <el-button class="btn" v-if="row.status !=='未通过'" size="mini" type="success" @click="handleModifyStatus(row,'未审核')">
                      已审核
                  </el-button>
                  <el-button class="btn" v-if="row.status ==='未通过'" size="mini" type="warning" @click="handleModifyStatus(row,'未接单')">
                      未审核
                  </el-button>  
                <el-button
                size="mini"
                type="danger"
                class="el-icon-delete"
                @click="handleDelete(index,row)"></el-button>  
              </template>
        </el-table-column>
        </el-table>
    </div>
  </template>
  
  <style>
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  </style>
  
  <script>
  import axios from 'axios'
    export default {
      data() {
        return {
          searchInfo:'',
          user_data:[],
          user_data_show:[],
          tableData: [{
            id: '0',
            phone: '18000000000',
            time: '2020-1-1',
            shop:'KFC',
            cust:'Bob',
            value:'10.5',
            status:'已接单',
            tip:'不要辣',
            status_pass:'未审核',
            foods:[
                {
                    food:'面条',
                    num: 1
                },
                {
                    food:'盖浇饭',
                    num: 3
                }
            ]
          }, 
          {
            id: '1',
            phone: '18000000000',
            time: '2021-1-1',
            shop:'麦当劳',
            cust:'Jack',
            value:'10.5',
            status:'未接单',
            status_pass:'已审核',
            tip:'分开装',
            foods:[
                {
                    food:'面包',
                    num: 1
                },
                {
                    food:'冰激凌',
                    num: 3
                }
            ]
          }]
        }
      },
      created() {
        this.getAllusers()
      },
      methods:{
        async getAllusers(search) {
                var query = {}
                axios.post(`/admin/allorders`,query)
                .then((res) => { 
                  console.log(res)
                  this.collegeList = res.data;
                  console.log("res.data")
                  console.log(this.collegeList)
                  this.user_data = this.collegeList;
                  this.currentPage = 1;
                  var start = 0;
                  var end = start + this.pageSize;
                  this.user_data_show = this.user_data.slice(start, end)
                  console.log(this.user_data)
                  console.log(this.tableData)
                  if (res.status !== 200) return this.$message.error('获取列表失败')
                })
        },
        handleModifyStatus(row, status) {
        console.log(row)
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status_pass = status
        var query = {}
        if(status === "未接单") {
          query = {id : row.id}
          axios.post('/admin/orderpass',query)
          this.getAllusers()
        }
      },
      handleDelete(index,row) {
          console.log(row)
          var query = {
            id : row.id //订单号
        }
          // 弹框提示
          this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(async () => {
              // 确定删除
              axios.post(`/admin/delorder`,query)
            .then((res) => { 
              console.log(res)
                if (res.status != 200)
                return this.$message({
                  type: 'error',
                  message: '删除失败!',
                })
                this.$message({
                type: 'success',
                message: '删除成功!',
                })
                // 刷新院系列表
                this.getAllusers()
            })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              })
            })
      },
      }
    }
  </script>
  <style>

  .demo-table-expand{
    margin-left: 20px;
    width: 500px;
    height: 500px;
  }

</style>